<template>
  <main>
    <div class="main">
      <div>
        <a-carousel autoplay :adaptiveHeight="true">
          <div v-for="(item, index) in banners" :key="index">
            <a-image class="banner-img" :src="item.cover" />
          </div>
        </a-carousel>
      </div>

      <div class="section-content">
        <div class="search-input-wrapper">
          <a-input-search placeholder="请输入关键字" :allowClear="true" v-model="searchKeywords" @focus="inputSearchOnFocus" @change="inputSearchChange" @blur="inputSearchOnBlur" @pressEnter="searchPressEnter" />
        </div>

        <div>
          <menu-bar-pc :selectedIndex.sync="selectedIndex" :items="categories" :itemClick="menuItemClick"></menu-bar-pc>
        </div>

        <div class="collection">
          <div class="container">
            <div class="cell" v-for="(item, index) in items" :key="index" @click="itemClick(item)">
              <a-image :src="item.cover" />
              <v-clamp class="cell-headline" autoresize :max-lines="2">{{ item.name }}</v-clamp>
              <p class="cell-subhead">￥{{ item.retailPrice > 0 ? item.retailPrice + item.unitId : "商议" }}</p>
            </div>
          </div>
        </div>

        <a-pagination background layout="prev, pager, next" :current="currentPage" :page-size="pageSize" :total="totalCount" @change="paginationOnChange"> </a-pagination>
      </div>
    </div>
  </main>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "Home",
  data() {
    return {
      selectedIndex: 0,
      searchKeywords: "",
      isSearchInputing: false,
    };
  },
  components: {},

  computed: {
    ...mapState("goods", {
      categories: (state) => state.categories,
      items: (state) => state.items,
      pageSize: (state) => state.pageSize,
      pageTotal: (state) => state.pageTotal,
      totalCount: (state) => state.totalCount,
      currentPage: (state) => state.currentPage,
      originalPage: (state) => state.originalPage,
    }),
    ...mapState("banner", {
      banners: (state) => state.goodsBanners,
    }),
  },

  created() {
    document.title = "商品中心";
    const that = this;
    this.getGoodsBannerListAction().catch((error) => {
      that.$message.error(error.message);
    });
    this.getGoodsCategoryListAction({ pageNo: 1, pageSize: 99 })
      .then(() => {
        that.updateList();
      })
      .catch((error) => {
        that.$message.error(error.message);
      });
  },

  methods: {
    ...mapActions("goods", ["getGoodsCategoryListAction", "getGoodsListAction", "updateCurrentPageAction", "updateOriginalPageAction"]),
    ...mapActions("banner", ["getGoodsBannerListAction"]),

    itemClick(item) {
      this.$router.push({
        path: "/goods/detail",
        query: { id: item.id },
      });
    },

    menuItemClick(item, index) {
      this.selectedIndex = index;
      this.updateCurrentPageAction(1);

      this.updateList();
    },

    /**
     * @description: 输入框编辑聚焦(开始编辑)
     * @param {*}
     * @return {*}
     */
    inputSearchOnFocus() {
      if (!this.searchKeywords) {
        this.updateOriginalPageAction(this.currentPage);
      }
      this.updateCurrentPageAction(1);
      this.isSearchInputing = true;
    },

    /**
     * @description: 输入文本变化监听，可以用于Autocomplete的实现
     * @param {*}
     * @return {*}
     */
    inputSearchChange() {
      if (this.isSearchInputing == false) {
        if (!this.searchKeywords) {
          this.updateCurrentPageAction(this.originalPage);
          this.updateList();
        }
      }
    },

    /**
     * @description:输入框失去编辑聚焦
     * @param {*}
     * @return {*}
     */
    inputSearchOnBlur() {
      this.isSearchInputing = false;
      this.updateList();
    },

    /**
     * @description: 键盘enter事件监听
     * @param {*}
     * @return {*}
     */
    searchPressEnter() {
      // console.log('\n\n searchPressEnter this.originalPage = ' + JSON.stringify(this.originalPage) + '\n\n')
      const isRefresh = true;
      this.updateList(isRefresh);
    },

    paginationOnChange(value) {
      // console.log('\n\n  = ' + 'paginationOnChange' + '\n\n')
      this.updateCurrentPageAction(value);
      this.updateList();
    },

    updateList() {
      const that = this;
      const item = this.categories[this.selectedIndex];
      var categoryId = null;
      if (item) {
        categoryId = item.id;
      }
      // encodeURI
      const parameters = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        categoryId: this.searchKeywords ? "0" : categoryId,
        // categoryId: categoryId,
        name: this.searchKeywords,
      };
      const isRefresh = true;
      const isPC = true;
      this.getGoodsListAction({ isRefresh, parameters, isPC }).catch((error) => {
        that.$message.error(error.message);
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
